<template>
    <div>
        <!-- 测试v-html 
        <div v-html="vhtmlstr"></div>
        <br>
        <br> -->
        输入标题：
        <el-input
            v-model="inputTitle"
            placeholder="请输入标题"
            size="normal"
            clearable
        ></el-input>
        选择类型：
        <el-select
            v-model="selectValue1"
            class="m-2"
            placeholder="Select"
            size="large"
        >
            <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        指定用户：
        <el-select
            v-model="selectValue2"
            class="m-2"
            placeholder="Select"
            size="large"
        >
            <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <!-- 富文本框的容器 -->
        <textarea id="default-editor"></textarea>
        <el-button type="primary" size="default" @click="bindConfirm"
            >确定</el-button
        >
    </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { nextTick, onMounted, ref } from 'vue'
import axios from 'axios'
import { useAccountStore } from '@/stores/user'

// 测试
// const vhtmlstr = ref('<p style="text-align: center;">123</p>')

const accountStore = useAccountStore()
const inputTitle = ref('')
const selectValue1 = ref('')
const selectValue2 = ref('')
const options1 = [
    {
        value: '系统公告',
        label: '系统公告',
    },
    {
        value: '私人信息',
        label: '私人信息',
    },
    {
        value: 'app公告',
        label: 'app公告',
    },
]
let options2 = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
]
// 获取操作员列表
const getOperator = async () => {
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/operator/list',
    })
    const { code, info } = res.data
    if (code === 1) {
        // info
        // console.log(info)
        options2 = info.map(item => {
            return { value: item.username, label: item.username }
        })
        options2.push({ value: 'all', label: 'all' })
        options2.push({ value: 'app', label: 'app' })
        // console.log(options2)
    }
}

// 添加日志
const bindConfirm = async () => {
    // console.log(tinymce.activeEditor.getContent().toString())
    // console.log(typeof tinymce.activeEditor.getContent())
    let message = tinymce.activeEditor.getContent().toString()
    let title = inputTitle.value
    let category = selectValue1.value
    let user = accountStore.account.username
    let to_user = selectValue2.value
    // 参数 message,title,category,user,to_user
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/message/update',
        data:{
            message,
            title,
            category,
            user,
            to_user
        }
    })
    const { datainfo } = res.data
    let insertId = datainfo.insertId
    // console.log(insertId)
    
    // insertId
    const res2 = await axios({
        method: 'get',
        url: 'http://localhost:3000/message/state',
        params: {
            user: to_user,
        },
    })
    let userMessage
    const { code, info } = res2.data
    if (code === 1) {
        userMessage = JSON.parse(info[0].message)
        console.log(JSON.parse(info[0].message))
        // 需要传入的下个axios的
        userMessage.push({id:insertId,state:0})
        // console.log(userMessage)
    }
    await axios({
        method: 'post',
        url: 'http://localhost:3000/message/update_operator',
        data: {
            userMessage,
            user: to_user
        },
    })
    ElMessage.info('添加日志成功!')
    inputTitle.value = ''
    tinymce.activeEditor.setContent('')
}
onMounted(() => {
    getOperator()
    nextTick(() => {
        // DOM 此时已经更新
        tinymce.init({
            selector: 'textarea#default-editor',
            branding: false,
            height: 600,
            plugins: 'advlist link image lists paste',
            paste_data_images: true, //支持图片粘贴
        })
    })
})

// export default {
//     methods: {
//         bindConfirm() {
//             console.log(tinymce.activeEditor.getContent())
//             console.log(tinymce.activeEditor.getContent())
//             ElMessage.info('添加日志成功!')
//         },
//     },
//     mounted() {
//         this.$nextTick(() => {
//             tinymce.init({
//                 selector: 'textarea#default-editor',
//                 branding: false,
//                 height: 600,
//                 plugins: 'advlist link image lists paste',
//                 paste_data_images: true, //支持图片粘贴
//             })
//         })
//     },
// }
</script>

<style lang="scss" scoped></style>
